<template>
  <div class="pagestyle" style="display: flex;">
    <div v-if="fromIndexpointId" style="width: 382px;">
      <querybox :queryList="state.options.queryList.querys" @query="query"></querybox>
    </div>
    <topbottomCom :optionsquery="1">
      <template v-slot:dragTopSlot>
        <list_controller :showCaozuo="state.showCaozuo" @query="query" ref="zujianname" :options="state.options"
          @cellClickEvent="cellClickEvent">
          <template v-slot:opraCurdBtnAll>
            <span :class="state.listBtnType == 21 ? 'listInfoBtn active' : 'listInfoBtn'
              " @click="listInfoBtnClick(21)">
              <svg-icon :class="state.listBtnType == 21 ? 'active' : ''" class-name="search-icon"
                icon-class="quxian-g77hanc6" />
              查看曲线
            </span>
            <span :class="state.listBtnType == 2 ? 'listInfoBtn active' : 'listInfoBtn'
              " @click="listInfoBtnClick(2)">
              <svg-icon :class="state.listBtnType == 2 ? 'active' : ''" class-name="search-icon"
                icon-class="shouyetaishifenxi" />
              态势分析
            </span>
          </template>
          <template v-slot:selectNamelist> 模拟量历史数据 </template>
        </list_controller>
      </template>
      <template v-slot:dragBottomSlot>
        <list_controller :showCaozuo="state.showCaozuo" ref="zujiannametwo" :descQuery="state.descObj"
          :options="state.optionstwo" @pagechange="pagechange">
          <template v-slot:selectNamelist> 详细信息(总计) </template>
        </list_controller>
      </template>
    </topbottomCom>
    <!-- 填写分析 -->
    <fillayaCom :fillayaComShow="state.fillayaComShow" @submitFormfillayaCom="submitFormfillayaCom"
      :tempList="state.tempList" :status="'D'" @sumbitClick="sumbitClick" @delTemp="delTemp"></fillayaCom>
    <!-- 查看曲线 -->
    <chartCom :openChart="state.showChart" :data="state.chartData" @closeChart="closeChart">
    </chartCom>
    <!-- 查看分析 -->
    <ayadetailCom :detailsList="state.detailsList" :detailsShow="state.detailsShow"></ayadetailCom>
    <!-- 详情 -->
    <el-drawer v-model="state.drawerShow" direction="rtl" size="50%" close-on-click-modal :modal="true">
      <template #header="{ close, titleId, titleClass }">
        <h4 class="mask_sub_title" style="color: #3e464f; margin: 0">
          <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>态势分析</span>
        </h4>
      </template>
      <div>
        <realChartCom :pointDataList="state.pointDataList" :drawerShow="state.drawerShow" :nomoreType="1">
        </realChartCom>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import querybox from "@/components/commonCom/querybox"; //用于首页抽屉查询处理
import topbottomCom from "./listCom/topbottomCom.vue";
import list_controller from "@/components/commonCom/list_controller";
import fillayaCom from "./listCom/fillayaCom.vue";
import ayadetailCom from "./listCom/ayadetailCom.vue";
import realChartCom from "./listCom/realChartCom.vue";
import chartCom from "./listCom/chartCom.vue";
import {
  computed,
  nextTick,
  onMounted,
  reactive
} from "vue";
import {
  table_headers
} from "@/components/commonCom/table_headers";
import axios from "@/utils/request";
import usePagesStore from "@/store/modules/pages";
import {
  ElMessage,
  ElMessageBox,
  ElNotification
} from "element-plus";
import dayjs from "dayjs";
import {
  searchareaTree
} from "@/api/config";
const {
  proxy
} = getCurrentInstance();
const store = usePagesStore();
const router = useRouter();
let previewHttps =
  import.meta.env.VITE_APP_HTTP;
const upload = ref(null);
// 首页查询抽屉传值
const props = defineProps({
  fromIndexpointId: Object
})
let state = reactive({
  detailsShow: false,
  detailsList: [],
  tempList: [],
  fillayaComShow: false, //控制填写分析抽屉显示
  listBtnType: undefined,
  options: {
    tableheads: computed(() => table_headers.hisHourInfo),
    queryList: {
      queryTitle: '选择测点',
      autoSearch: props.fromIndexpointId ? true : undefined,
      querys: [{
        fieldsearch: "conditionType",
        field: "conditionType",
        title: "查询方式",
        type: "radiospecial",
        binddata: 1,
        options: [{
          label: "时间查询",
          value: 1,
        },
        {
          label: "班次查询",
          value: 2,
        },
        ],
      },
      {
        field: ["startTime", "endTime"],
        fieldsearch: ["startTime", "endTime"],
        title: "时间范围",
        col: 12,
        type: "datetimestartEnd",
        binddata: [
          dayjs().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss"),
          dayjs().format("YYYY-MM-DD HH:mm:ss"),
        ],
        typespecial: 2,
        show: false,
      },
      {
        field: "datetime",
        fieldsearch: "datetime",
        title: "日期",
        type: "datetime",
        binddata: dayjs().format("YYYY-MM-DD"),
        typespecial: 1,
        show: true,
      },
      {
        fieldsearch: "banci",
        field: "banci",
        title: "班次选择",
        type: "selectspecial",
        binddata: "",
        options: [],
        typespecial: 1,
        show: true,
      },
      {
        field: "area",
        title: "所在区域",
        type: "cascaderRadionarmal",
        binddata: "",
        options: [],
        props: {
          children: "childList",
          value: "areaName",
          label: "areaName",
          checkStrictly: true,
          emitPath: false,
        },
      },
      {
        field: "condition",
        fieldSpecial: "condition",
        title: "测点类型",
        type: "cascaderRadio",
        binddata: "A",
        options: [],
        props: {
          children: "children",
          value: "code",
          label: "name",
          checkStrictly: true,
          emitPath: false,
        },
      },
      {
        field: "pointId",
        title: "选择测点",
        type: "cascaderRadioSpecial",
        binddata: "",
        options: [],
        props: {
          children: "children",
          value: "commonField",
          label: "commonField",
          checkStrictly: false,
          emitPath: false,
        },
      },
      {
        field: "isShowLocal",
        title: "只显示当前测点",
        type: "elcheckbox",
        binddata: false,
      }

      ],
    },
    dataUrl: "/hisPointHour/listTimeInfo",
  },
  optionstwo: {
    queryList: {
      detailListSear: true,
      autoSearch: true,
      querys: [],
    },
    tableheads: computed(() => table_headers.hisHourDetailInfo),
    dataUrl: "/hisPointHour/listDetailTimeInfo",
  },
  editId: undefined,
  banciList: [],
  showCaozuo: true,
  data: {},
  areaObj: {
    condition: "A",
    flag: "listTimeStatistic",
    isShowLocal: false,
    isShowVirtual: true
  },
  descObj: {},
  drawerShow: false,
  pointDataList: [],
  showChart: false,
  chartData: {},
});
// 提交填写分析
function submitFormfillayaCom(data) {
  let dataObj = {};
  dataObj.id = state.editId;
  dataObj.templateDto = data;
  if (data) {
    axios.post("/hisPointFeed/modifyRealPointTemplate", dataObj).then((res) => {
      proxy.$modal.msgSuccess(res.msg);
      state.fillayaComShow = false;
      proxy.$refs.zujiannametwo.getData({
        ...state.descObj,
      });
    });
  } else {
    state.fillayaComShow = false;
  }
}

function listInfoBtnClick(type) {
  state.listBtnType = type;
  if (type == 1) {
    goPage();
  }
  if (type == 2) {
    if (proxy.$refs.zujianname.vxe.state.records.length > 0) {
      state.drawerShow = true;
      state.pointDataList = proxy.$refs.zujianname.vxe.state.records;
    } else {
      proxy.$modal.msgWarning("请先选择数据!");
    }
  }
  if (type == 21) {
    if (store.records.length == 0 || store.records.length > 1 || store.records[0].topbottomNum == 2) {
      ElMessage.error("请选择一个测点");
      state.listBtnType = undefined;
      return;
    } else {
      state.showChart = !state.showChart;
      state.chartData = {
        pointIds: [state.options.queryList.querys[5].binddata],
        queryStartTime: dayjs(
          state.options.queryList.querys[1].binddata[0]
        ).format("YYYY-MM-DD HH:mm:ss"),
        queryEndTime: dayjs(
          state.options.queryList.querys[1].binddata[1]
        ).format("YYYY-MM-DD HH:mm:ss"),
      };
    }
  }
}
// 获取分析模板
function gettempList() {
  axios
    .post("/template/expression/obtainAll", {
      templateType: "A",
    })
    .then((res) => {
      state.tempList = res.data;
    });
}
gettempList();
// 提交模板新增/修改
const sumbitClick = (data) => {
  if (data.modaltitle == "新增模板") {
    data.form_data.usageNumber = 0;
    axios.post("/template/analysis/save", data.form_data).then((res) => {
      if (res.code == 200) {
        ElMessage.success("操作成功");
        gettempList();
      }
    });
  } else {
    axios.post("/template/analysis/update", data.form_data).then((res) => {
      if (res.code == 200) {
        ElMessage.success("操作成功");
        gettempList();
      }
    });
  }
};
// 删除模板
const delTemp = (data) => {
  axios.post("/template/analysis/delete", { id: data }).then((res) => {
    if (res.code == 200) {
      ElMessage.success("操作成功");
      gettempList();
    }
  });
};

function cellClickEvent(row) {
  store.records = []
  state.data = row;
  state.descObj.pointId = row.pointId;
  proxy.$refs.zujiannametwo.getData({
    ...state.descObj,
  });
}

function pagechange() {
  proxy.$refs.zujiannametwo.getData({
    ...state.descObj,
  });
}

function query(type) {
  if (type.item && (type.item.field == "isShowLocal"
    || type.item.type == 'datetimestartEnd')) {
    state.areaObj.isShowLocal = type.val
    getconditionList(state.areaObj)
  }
  if (type == 2) {
    proxy.$refs.zujiannametwo.state.tabledata = [];
    getconditionList({
      condition: "A"
    });
    state.options.queryList.querys.forEach((item) => {
      if (item.field == "condition") {
        item.binddata = "A";
      }
    });
  }
  if (type.type == 4) {
    state.options.queryList.querys.forEach((item) => {
      if (item.field == "condition") {
        if (type.val != null) {
          item.binddata = type.val;
          state.areaObj["condition"] = type.val;
        } else {
          state.areaObj["condition"] = 'A';
        }
      }
    });
    getconditionList(state.areaObj);
  }
  if (type.type == 44) {
    state.options.queryList.querys.forEach((item) => {
      if (item.type == "cascaderRadioSpecial") {
        if (item.binddata == "" || !item.binddata) {
          state.areaObj["areaName"] = type.val1;
          getconditionList(state.areaObj);
        }
      }
    });
  }
  if (type.type == 5 && type.item.type != 'datetimestartEnd') {
    let dataObj = {
      dateSuffix: undefined,
      classInfo: {},
    };
    state.options.queryList.querys.forEach((item) => {
      if (type.val1) {
        dataObj.dateSuffix = type.val1;
        if (item.fieldsearch == "banci") {
          state.banciList.forEach((itemsub) => {
            if (itemsub.id == item.binddata) {
              dataObj.classInfo = itemsub;
              dataObj.typeLabel = 2
              banciList(dataObj);
            }
          });
        }
      } else {
        if (item.fieldsearch == "datetime") {
          dataObj.dateSuffix = item.binddata;
        }
      }
      if (item.fieldsearch == "banci") {
        state.banciList.forEach((itemsub) => {
          if (type.val == 0) {
            type.val = state.banciList[0].id;
          }
          if (itemsub.id == type.val) {
            dataObj.classInfo = itemsub;
            dataObj.typeLabel = 2
            banciList(dataObj);
          }
        });
      }
    });
  }
  if (type.type == "topConnectBom") {
    state.descObj = type.data;
    proxy.$refs.zujiannametwo.state.tabledata = [];
  }
  if (type == 1 && props.fromIndexpointId) {
    proxy.$refs.zujianname.getData()
  }
}

function getbanciList() {
  axios.post("/class/info/searchAll", {}).then((res) => {
    state.banciList = res.data.list;
    state.options.queryList.querys.forEach((item) => {
      if (item.fieldsearch == "banci") {
        item.options = res.data.list.map((item) => {
          return {
            label: item.className,
            value: item.id,
          };
        });
        item.binddata = item.options[0].value;
      }
    });
  });
}
getbanciList();

function banciList(dataObj) {
  axios.post("/hisPointFeed/handleClassInfo", dataObj).then((res) => {
    state.options.queryList.querys.forEach((item) => {
      if (dataObj.typeLabel != 2 || state.options.queryList.querys[0].binddata == 2) {
        if (item.type == "datetimestartEnd") {
          item.binddata = [res.data.feedStartTime, res.data.feedEndTime];
        }
      }
    });
  });
}

function getSelList() {
  axios.post("/hisPointFeed/listAllNames", {
    flag: true,
    code: 'A'
  }).then((res) => {
    state.options.queryList.querys.forEach((item) => {
      if (item.field == "condition") {
        let data = [];
        res.data.forEach((item) => {
          if (item.code != "D") {
            data.push(item);
          }
        });
        item.options = data;
      }
    });
  });
  searchareaTree().then((res) => {
    state.options.queryList.querys.forEach((item) => {
      if (item.field == "area") {
        item.options = res.data;
      }
    });
  });
}

function getconditionList(dataObj) {
  state.options.queryList.querys.forEach((item) => {
    if (item.type == "datetimestartEnd") {
      dataObj.startTime = dayjs(item.binddata[0]).format('YYYY-MM-DD HH:mm:ss 000')
      dataObj.endTime = dayjs(item.binddata[1]).format('YYYY-MM-DD HH:mm:ss 000')
    }
  });
  axios.post("/hisPointFeed/conditionList", dataObj).then((res) => {
    state.options.queryList.querys.forEach((item) => {
      if (item.type == "cascaderRadioSpecial") {
        item.options = res.data;
      }
    });
  });
}
getconditionList(state.areaObj);
getSelList();
// 跳转实时馈电异常页面
const goPage = () => {
  router.push({
    path: "/lb/sskdyc",
  });
};
// 关闭曲线
const closeChart = () => {
  state.listBtnType = undefined;
  state.showChart = false;
};

onMounted(() => {
  if (props.fromIndexpointId) {
    state.options.queryList.querys.forEach((item) => {
      item.col = 24
      if (item.type == "cascaderRadioSpecial") {
        item.binddata = props.fromIndexpointId.pointId
        item.binddata1 = [props.fromIndexpointId.sensorName, props.fromIndexpointId.pointId, props
          .fromIndexpointId.place
        ]
        proxy.$refs['zujianname'].getData()
      }
    });
  }
});
</script>
<style lang="scss" scoped>
.xiazai {
  position: absolute;
  top: 42px;
  right: 110px;
  width: 120px;
  height: 64px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  z-index: 99;

  .item {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .item:hover {
    background-color: #ececec;
  }
}

::v-deep .el-drawer {
  .querycss {
    .fsc {
      &:nth-child(2) {
        display: none;
      }
    }
  }

  .table_box {
    .fsc {
      display: none;
    }
  }
}
</style>